import React from "react";
import { Menu, Dropdown, Button } from "antd";
import { useDispatch } from "react-redux";
import { MoreOutlined } from "@ant-design/icons";
import { Dispatch } from "@/store";
interface editEdge {
  edge: any;
  isEdited?: boolean;
}

const EditEdge = (props: editEdge) => {
  const { edge, isEdited = true } = props;
  const dispatch = useDispatch<Dispatch>();
  const edit = () => {
    dispatch.diagram.openModal(edge);
  };
  return (
    <Dropdown
      overlay={
        <Menu>
          {isEdited && (
            <Menu.Item key="1" onClick={edit}>
              edit
            </Menu.Item>
          )}
        </Menu>
      }
      trigger={["hover"]}
    >
      <Button type="text" size="small" icon={<MoreOutlined />} />
    </Dropdown>
  );
};
export default EditEdge;
